{% extends 'sales/base.html' %}
{% load static %}
{% block extralinks %}
{% endblock %}
{% block breadcrumb %}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% url 'common:api_settings' %}">Settings</a></li>
    <li class="breadcrumb-item active">Create</li>
  </ol>
</nav>
{% endblock %}
{%block content%}
<form id="add_form" method="POST" action="" novalidate>
  <div class="overview_form_block row marl justify-content-center">
    <div class="col-md-9">
      <div class="card">
        <div class="card-body">
          <div class="card-title text-center">
            CREATE SETTINGS
          </div>
          <div class="row marl no-gutters">
            <div class="col-md-12">
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label>Title{% if form.title.field.required %}<span class="error">*</span>{% endif %}</label>
                  <input type="text" name="title" class="form-control" value="">
                  <span class="error">{{ settings_form.title.errors }}</span>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label>Website{% if form.website.field.required %}<span class="error">*</span>{% endif %} <span class="help-text">Example: http://google.com</span></label>
                  <input type="text" name="website" class="form-control" value="">
                  <span class="error">{{ settings_form.website.errors }}</span>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="filter_col col-md-12">
                <div class="form-group">
                  <label>Assigned Users</label>
                  <select class="assigned_users form-control" name="lead_assigned_to" multiple="multiple">
                  {% for user in users %}
                    <option value="{{user.id}}" {% if user in setting.lead_assigned_to.all or user.id in assign_to_list %} selected="" {% endif %}>{{user.email}}</option>
                  {% endfor %}
                  </select>
                  <span class="error">{{ settings_form.lead_assigned_to.errors }}</span>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <div class="filter_col col-12">
                <div class="form-group">
                  <label>Tags</label>
                  <div class="txt-box-div" id="tag-div"><input type="text" name="tags" id="tags_1" value="{% for t in setting.tags.all %}{{t.name}}, {% endfor %}" class="tags"/>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-12">
              <span class="__all__"></span>
              <div class="row marl buttons_row text-center form_btn_row">
                <button  class="btn btn-default save" type="submit">Save</button>
                {% if not setting %}
                <button class="btn btn-success save savenew" type="submit">Save & New</button>
                {% endif %}
                <a href="{% url 'common:api_settings' %}" class="btn btn-default clear" id="create_lead_cancel">Cancel</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <input type="hidden" id="save_new_form" name="savenewform">
  </div>
</form>
{% endblock %}
{% block js_block %}

  <script type="text/javascript">
    $("#add_form").submit(function(e){
      e.preventDefault();
      $form = $(this)
      $.post("", $form.serialize(), function(response){
         $(".error_message").remove();
          if(response.error){
            $.each(response.errors, function(field_name, error){
              if (field_name == '__all__'){
                error = "<span class=\"error_message\" style=color:red>" + error + "</span>"
                $("span.__all__").after(error)
              }else{
                error = "<span class=\"error_message\" style=color:red>" + error + "</span>"
                $form.find("[name="+field_name + "]").after(error)
              }
            })
          }
         else{
          window.location = response.success_url
         }
      });
    });
    $(".savenew").on('click', function(e){
      e.preventDefault()
      $("#save_new_form").val('true')
      $('#add_form').submit()
    });
    $(document).ready(function() {
      $('.assigned_users').select2();
    });
    $(function() {
    
      $('#tags_1').tagsInput({width:'auto'});
      $('#tags_2').tagsInput({
        width: 'auto',
        onChange: function(elem, elem_tags)
        {
          var languages = ['php','ruby','javascript'];
          $('.tag', elem_tags).each(function()
          {
            if($(this).text().search(new RegExp('\\b(' + languages.join('|') + ')\\b')) >= 0)
              $(this).css('background-color', 'yellow');
          });
        }
      });
      $('#tags_3').tagsInput({
        width: 'auto',
    
        //autocomplete_url:'test/fake_plaintext_endpoint.html' //jquery.autocomplete (not jquery ui)
        autocomplete_url:'test/fake_json_endpoint.html' // jquery ui autocomplete requires a json endpoint
      });


    // Uncomment this line to see the callback functions in action
    //      $('input.tags').tagsInput({onAddTag:onAddTag,onRemoveTag:onRemoveTag,onChange: onChangeTag});   

    // Uncomment this line to see an input with no interface for adding new tags.
    //      $('input.tags').tagsInput({interactive:false});
    });

  </script>
{% endblock js_block %}

